<template>
  <div>
    <div>add</div>
    <basicModal @register="modalRegister" ref="modalRef" class="basicModal" @on-ok="okModal">
      <template #default>
        <BasicForm @register="register" @reset="handleReset" class="basicForm">
          <template #statusSlot="{ model, field }">
            <n-input v-model:value="model[field]" />
          </template>
        </BasicForm>
      </template>
    </basicModal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted, nextTick, watch, defineProps } from "vue";
import { useMessage } from 'naive-ui';
import { basicModal, useModal } from '@/components/Modal';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import {getHospById } from "@/api/yygh/hosp";


const schemas: FormSchema[] = [
  {
    field: 'hosname',
    component: 'NInput',
    label: '医院名称',
    labelMessage: '请输入医院名称',
    giProps: {
      span: 1,
    },
    componentProps: {
      placeholder: '请输入医院名称',
      onInput: (e: any) => {
        console.log(e);
      },
    },
    rules: [{ required: true, message: '请输入医院名称', trigger: ['blur'] }],
  },
  {
    field: 'hoscode',
    component: 'NInput',
    label: '医院编号',
    componentProps: {
      placeholder: '请输入医院编号',
      showButton: false,
      onInput: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: 'fullAddress',
    component: 'NInput',
    label: '地址',
    componentProps: {
      placeholder: '请输入地址',
      showButton: false,
      onInput: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: 'route',
    component: 'NInput',
    label: '坐车路线',
    componentProps: {
      placeholder: '坐车路线',
      showButton: false,
      type: "textarea",
      onInput: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: 'intro',
    component: 'NInput',
    label: '医院简介',
    componentProps: {
      placeholder: '医院简介',
      showButton: false,
      type: "textarea",
      onInput: (e: any) => {
        console.log(e);
      },
    },
  },
  // 预约规格信息
  {
    field: '预约周期',
    component: 'NInput',
    label: '预约周期',
    componentProps: {
      placeholder: '预约周期',
      showButton: false,
      onInput: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: '预约时间',
    component: 'NInput',
    label: '预约时间',
    componentProps: {
      placeholder: '预约时间',
      showButton: false,
      onInput: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: '停挂时间',
    component: 'NInput',
    label: '停挂时间',
    componentProps: {
      placeholder: '停挂时间',
      showButton: false,
      onInput: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: '退号时间',
    component: 'NInput',
    label: '退号时间',
    componentProps: {
      placeholder: '退号时间',
      showButton: false,
      onInput: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: '停挂时间',
    component: 'NInput',
    label: '预约规则',
    componentProps: {
      placeholder: '预约规则',
      showButton: false,
      onInput: (e: any) => {
        console.log(e);
      },
    },
  },
];


export default defineComponent({
  components: { basicModal, BasicForm },
  props:["hospSetId"],
  setup(props) {

    const modalRef: any = ref(null);
    const message = useMessage();
// 表单初始化
    const [register, { submit, validate, getFieldsValue, setFieldsValue }] = useForm({
      gridProps: { cols: 1 },
      collapsedRows: 3,
      labelWidth: 120,
      layout: 'horizontal',
      submitButtonText: '提交预约',
      showActionButtonGroup: false,
      schemas,
    });


    async function chouMonkeySubmit() {
      try {
        const a = await validate(getFieldsValue())
        console.log("a", a)
      } catch (e) {
        console.log("catch", e)
        return e
      }
    }


    const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
      title: '医院设置添加',
    });

    function reloadData (id) {
      console.log("reloadData")
      if(!id) return;
      getHospById(id).then(res => {
        let data = res.data.hospital;
        if(data) {
          setFieldsValue({...data, ...data.param})
        }
      })
    }

    async function okModal() {
      const validate = await chouMonkeySubmit();
      console.log("validate", validate)

      console.log("getFormValue", setFieldsValue({hosname: '1111'}))

      // if (!validate) {
      //   let formData = getFieldsValue();
      //   console.log("formData", formData)
      //   saveHospSet(formData).then(res => {
      //     closeModal();
      //     console.log("saveHospSet", res)
      //     message.success('提交成功');
      //   })
      // } else {
      //   message.error('验证失败，请填写完整信息');
        setSubLoading(false);
      // }
    }

    watch(() => props.hospSetId, (newVal, oldVal)=> {
      console.log("newVal", newVal, oldVal)
      if(newVal) {
        reloadData(newVal)
      }
      },
      {
        immediate: true
      })
    return {
      modalRef,
      register,
      modalRegister,
      openModal,
      okModal,
      reloadData,
      closeModal
    }
  },
})


</script>

